<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地历史记录存储</title>
    <style>
        *{
            margin:0;
            margin:0;
            list-style:none;
            text-decoration:none;
            font:"Microsoft Yahei" 16px;
        }
        i{
            font-style:normal;
        }
        .box{
            width:500px;
            margin:60px auto;
            background:#1b6b63;
            padding:20px 10px;
            position:relative;
        }
        input,button{
            outline:none;
            vertical-align:middle;
        }
        form{
            text-align:center;
        }
        #ipt{
            width:360px;
            height:40px;
            line-height:40px;
        }
        button{
            width:60px;
            height:44px;
            line-height:42px;
            color:#333;
            margin-left:16px;
            cursor:pointer;
        }
        ul{
            position:absolute;
            top:65px;
            width:320px;
            border:2px solid #ddd;
        }
    </style>
</head>
<body>
    <div class="box">
        <form action="">
            <input type="text" id="ipt" />
            <button id="btn">搜索</button>
        </form>
        <ul>
            <li>
                <a href="www.baidu.com"><span></span></a>
                <i>删除</i>
            </li>
        </ul>
    </div>
</body>
</html>